<template>
  <div class="tab-bar">
    <div class="tab-bar-item" @click="jumpToIndex">
      1
    </div>
    <div class="tab-bar-item" @click="jumpToShopCar">2</div>
    <div class="tab-bar-item" @click="jumpToPersonalCenter">3</div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
function jumpToIndex ():void {
  router.push('/index')
}
function jumpToShopCar ():void {
  router.push('/shop-car')
}
function jumpToPersonalCenter ():void {
  router.push('/personal-center')
}
</script>

<style scoped lang="less">
.tab-bar {
  display: flex;
  width: 100%;
  height: 46px;
  .tab-bar-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
